//定时任务
<template>
  <div class="settime">
    <div class="settime_coment">
      <div class="settime_divs">
        <div class="bigs">
          <div class="settime_divs_top">
            <div class="settime_divs_top_ipt">
              <input type="text" placeholder="bean名称" v-model="serchValue" />
            </div>
            <div class="settime_divs_top_btn">
              <el-button class="settime_divs_top_btn_btn" @click="serch()"
                >搜索</el-button
              >
              <el-button
                type="primary"
                class="settime_divs_top_btn_btn"
                @click="add_or_edit('新增')"
                >新增</el-button
              >
              <el-button
                type="danger"
                class="settime_divs_top_btn_btn"
                @click="
                  () => {
                    dialogVisible = true;
                    cz = '批量删除';
                  }
                "
                >批量删除</el-button
              >
              <el-button
                type="danger"
                class="settime_divs_top_btn_btn"
                :disabled="flag2.value"
                @click="
                  () => {
                    dialogVisible = true;
                    cz = '批量暂停';
                  }
                "
                >批量暂停</el-button
              >
              <el-button
                type="danger"
                class="settime_divs_top_btn_btn"
                :disabled="flag2.value"
                @click="
                  () => {
                    dialogVisible = true;
                    cz = '批量恢复';
                  }
                "
                >批量恢复</el-button
              >
              <el-button
                type="danger"
                class="settime_divs_top_btn_btn"
                :disabled="flag2.value"
                @click="
                  () => {
                    dialogVisible = true;
                    cz = '批量立即执行';
                  }
                "
                >批量立即执行</el-button
              >
              <el-button type="success" class="settime_divs_top_btn_btn"
                >日志列表</el-button
              >
            </div>
          </div>
          <div class="settime_divs_center">
            <el-table
              ref="multipleTableRef"
              :data="tableData"
              style="width: 100%"
              @selection-change="handleSelectionChange"
              :border="true"
              @row-click="row_compont"
              @select="(selection, row) => list_s(selection, row)"
            >
              <el-table-column type="selection" width="40" />
              <el-table-column label="ID" width="70" align="center">
                <template #default="scope" width="120">{{
                  scope.row.jobId
                }}</template>
              </el-table-column>
              <el-table-column
                property="beanName"
                label="bean名称"
                width="250"
                align="center"
              />
              <el-table-column
                property="methodName"
                label="方法名称"
                width="150"
                show-overflow-tooltip
                align="center"
              />
              <el-table-column
                property="params"
                label="参数"
                width="250"
                align="center"
              />
              <el-table-column
                property="cronExpression"
                label="cron表达式"
                align="center"
                width="150"
              />
              <el-table-column
                property="remark"
                label="备注"
                width="250"
                align="center"
              />
              <el-table-column
                label="状态"
                width="200"
                property="status"
                align="center"
              >
                <template #default="scope" width="120">{{
                  scope.row.status ? "暂停" : "正常"
                }}</template>
              </el-table-column>
              <el-table-column property="name" label="操作" width="260">
                <button class="caozuobtn" @click="add_or_edit('编辑')">
                  修改
                </button>
                <button
                  class="caozuobtn"
                  @click="
                    () => {
                      dialogVisible = true;
                      cz = '删除';
                    }
                  "
                >
                  删除
                </button>
                <button
                  class="caozuobtn"
                  @click="
                    () => {
                      dialogVisible = true;
                      cz = '暂停';
                    }
                  "
                >
                  暂停
                </button>
                <button
                  class="caozuobtn"
                  @click="
                    () => {
                      dialogVisible = true;
                      cz = '恢复';
                    }
                  "
                >
                  恢复
                </button>
                <button
                  class="caozuobtn"
                  @click="
                    () => {
                      dialogVisible = true;
                      cz = '立即执行';
                    }
                  "
                >
                  立即执行
                </button>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹框 -->
    <el-dialog
      v-model="flag"
      :title="titles"
      width="50%"
      :before-close="handleClose"
    >
      <p class="p">
        <span>bean名称</span
        ><input
          type="text"
          placeholder="spring bean名称, 如: testTask"
          v-model="addname"
        />
      </p>
      <p class="p">
        <span>方法名称 </span
        ><input type="text" placeholder="方法名称" v-model="addTitle" />
      </p>
      <p class="p">
        <span>参数 </span
        ><input type="text" placeholder="参数" v-model="addcanshu" />
      </p>
      <p class="p">
        <span>cron表达式 </span
        ><input
          type="text"
          placeholder="如: 0 0 12 * * ?"
          v-model="addbiaodashi"
        />
      </p>
      <p class="p">
        <span>备注</span
        ><input type="text" placeholder="备注" v-model="addbeizhu" />
      </p>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="flag.value = false">取消</el-button>
          <el-button type="primary" @click="add()"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 对话确认框 -->
    <el-dialog v-model="dialogVisible" title="提示" width="30%">
      <span
        >确认对[id={{ ids_arr.length == 0 ? ids : ids_arr }}]进行[{{
          cz
        }}]操作</span
      >
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="caoz()"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElMessage, ElTable, ElMessageBox } from "element-plus";
import { useCounterStore } from "../../../../store/index";
import {
  onBeforeMount, // 在组件挂载之前执行的函数
  onMounted,
} from "vue";
import request from "../../../../utils/request";
let serchValue = ref("");
let flag: any = ref(false);
const store = useCounterStore();
let addname = ref(""); // 新增名字
let addTitle = ref(""); // 新增名字
let addcanshu = ref(""); // 新增名字
let addbiaodashi = ref(""); // 新增名字
let addbeizhu = ref(""); // 新增名字
let flag2 = ref(false);
let ids = ref("");
let ids_arr = ref([]);
let cz = ref("");
let status2 = ref("");
let titles = ref("新增");
let tableData: any = ref(store.cron_list);
let list: User[] = store.cron_list;
let dialogVisible = ref(false);
const addAgePatch = (data) => {
  store.$patch({
    cron_list: data,
  });
};

const dels = (num) => {
  request({
    url: "/sys/schedule",
    method: "DELETE",
    data: num == 0 ? [ids.value] : ids_arr.value,
  }).then((res) => {
    if (res.status == 200) {
      getList();
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    }
  });
};
const list_s = (selection, row) => {
  let arrs = [];
  selection.forEach((value, index) => {
    arrs.push(value.jobId);
  });
  ids_arr.value = arrs;
  // console.log(selection, "sssssssssss");
  console.log(ids_arr.value);
};
const add_or_edit = (name) => {
  //新增or编辑弹窗
  flag.value = true;
  titles.value = name;
};
const Timeouts = (num) => {
  request({
    url: "/sys/schedule/pause",
    method: "POST",
    data: num == 0 ? [ids.value] : ids_arr.value,
  }).then((res) => {
    if (res.status == 200) {
      getList();
      ElMessage({
        message: "暂停成功",
        type: "success",
      });
    }
  });
};
const recover = (num) => {
  request({
    url: "/sys/schedule/resume",
    method: "POST",
    data: num == 0 ? [ids.value] : ids_arr.value,
  }).then((res) => {
    if (res.status == 200) {
      getList();
      ElMessage({
        message: "恢复成功",
        type: "success",
      });
    }
  });
};
const runs = (num) => {
  let arr = [];
  if (num == 0) {
    arr.push(ids.value);
  }
  request({
    url: "/sys/schedule/run",
    method: "POST",
    data: arr,
  }).then((res) => {
    if (res.status == 200) {
      getList();
      ElMessage({
        message: "立即执行成功",
        type: "success",
      });
    }
  });
};

const add = () => {
  if (titles.value == "新增") {
    request({
      url: "/sys/schedule",
      method: "POST",
      data: {
        t: new Date().getTime(),
        beanName: addname.value,
        cronExpression: addbiaodashi.value,
        methodName: addcanshu.value,
        params: addTitle.value,
        remark: addbeizhu.value,
      },
    }).then((res) => {
      getList();
      ElMessage({
        message: "Congrats, this is a success message.",
        type: "success",
      });
    });
  } else if (titles.value == "编辑") {
    request({
      url: "/sys/schedule",
      method: "PUT",
      data: {
        t: new Date().getTime(),
        jobId: ids,
        beanName: addname.value,
        cronExpression: addbiaodashi.value,
        methodName: addcanshu.value,
        params: addTitle.value,
        remark: addbeizhu.value,
        status: status2.value,
      },
    }).then((res) => {
      getList();
      ElMessage({
        message: "Congrats, this is a success message.",
        type: "success",
      });
    });
  }

  flag.value = false;
};
const caoz = () => {
  switch (cz.value) {
    case "删除":
      dels(0);
      break;
    case "暂停":
      Timeouts(0);
      break;
    case "恢复":
      recover(0);
      break;
    case "立即执行":
      runs(0);
      break;

    case "批量删除":
      dels(1);
      break;
    case "批量暂停":
      Timeouts(1);
      break;
    case "批量恢复":
      recover(1);
      break;
    case "批量立即执行":
      runs(1);
      break;

    default:
      break;
  }
  dialogVisible.value = false;
  setTimeout(() => {
    getList();
  }, 1000);
};
const getList = () => {
  request({
    method: "get",
    url: `sys/schedule/page?${new Date().getTime()}&page=1&size=18&beanName=`,
    headers: {
      Authorization:
        "b9z1ZoWDim/AxMjOFy5m1ngFzaOni5SLpWJljf2ponwup+Ia5dmVetciuUGDmF+G",
    },
  }).then((res) => {
    tableData.value = res.data.records;
    addAgePatch(res.data.records);
  });
};
// /sys/schedule/pause
// /sys/schedule/resume
const row_compont = (row) => {
  console.log(row);

  status2.value = row.status;
  addname.value = row.beanName;
  addbiaodashi.value = row.cronExpression;
  addcanshu.value = row.params;
  addTitle.value = row.methodName;
  addbeizhu.value = row.remark;
  ids.value = row.jobId;
};

onMounted(() => {
  getList();
});

interface User {
  date: string;
  name: string;
  address: string;
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(row, undefined);
    });
  } else {
    multipleTableRef.value!.clearSelection();
  }
};
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};

const serch = () => {
  tableData.value = list.filter((item: any) => {
    return item.beanName.includes(serchValue.value);
  });
};
</script>

<style scoped>
.settime_divs_center {
  width: 100%;
}

.bigs {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin-top: 20px;
}

.settime_divs_top {
  width: 100%;
  display: flex;
}

.settime_divs_top_btn_btn {
  height: 38px;
  margin-left: 10px;
  padding: 0 15px;
}

.settime_divs_top_btn {
  width: 70%;
  margin-left: 20px;
}

.settime_divs_top_ipt {
  width: 20%;
}

.settime_divs_top_ipt > input {
  width: 100%;
  padding: 10px 10px;
}

.settime {
  width: 100%;
  height: 100%;
}

.settime_top {
  width: 100%;
  background: white;
  height: 50px;
}

.settime_coment {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 15px;
  width: 100%;
  height: 200px;
}

.settime_divs {
  width: 97%;
  background: white;
}

.el-table .cell {
  text-align: center !important;
  height: 50px;
  line-height: 50px !important;
}

.el-table__inner-wrapper {
  margin-top: 20px;
}
.caozuobtn {
  border: none;
  color: #02a1e9;
  padding: 10px;
  background: none;
}
.caozuobtn:hover {
  cursor: pointer;
}
.cell {
  text-align: center;
}
.p {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  align-items: center;
}
.p input {
  width: 85%;
  margin-left: 10px;
  height: 40px;
  padding-left: 10px;
  border: solid 1px #ccc;
}
</style>